<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '找回密码',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="entire" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <view style="padding: 30rpx; position: fixed; top: 150rpx" @click="back">
      <image
        src="@/static/images/icons/icon_return.png"
        style="width: 23rpx; height: 42rpx"
      ></image>
    </view>
    <image class="bg" :src="loginBg"></image>
    <view class="title1">格知汇</view>
    <view class="title2">Grundfos Academy China Club</view>
    <view class="input-area">
      <view class="input-entire">
        <view class="left">
          <view class="must">*</view>
          <image class="icon" :src="iconPhone" mode="widthFix"></image>
          <input
            class="text"
            type="number"
            v-model="pageData.form.phone"
            placeholder="请输入手机号"
            placeholder-class="placeholder-class"
          />
        </view>
      </view>
      <image style="width: 600rpx; margin-left: 40rpx" mode="widthFix" :src="iconDivider"></image>
      <view class="input-entire">
        <view class="left">
          <view class="must">*</view>
          <image class="icon" :src="iconPassword" mode="widthFix"></image>
          <input
            class="text"
            v-model="pageData.form.password"
            placeholder="密码至少8位且包含数字、字母"
            :password="pageData.hidePassword1"
            placeholder-class="placeholder-class"
          />
        </view>
        <image
          v-if="pageData.hidePassword1"
          style="width: 40rpx; height: 20rpx"
          :src="iconEyeClose"
          @click="pageData.hidePassword1 = false"
        ></image>
        <image
          v-if="!pageData.hidePassword1"
          style="width: 40rpx; height: 22rpx"
          :src="iconEye"
          @click="pageData.hidePassword1 = true"
        ></image>
      </view>
      <image style="width: 600rpx; margin-left: 40rpx" mode="widthFix" :src="iconDivider"></image>
      <view class="input-entire">
        <view class="left">
          <view class="must">*</view>
          <image class="icon" :src="iconPassword" mode="widthFix"></image>
          <input
            class="text"
            v-model="pageData.form.password2"
            placeholder="密码至少8位且包含数字、字母"
            :password="pageData.hidePassword2"
            placeholder-class="placeholder-class"
          />
        </view>
        <image
          v-if="pageData.hidePassword2"
          style="width: 40rpx; height: 20rpx"
          :src="iconEyeClose"
          @click="pageData.hidePassword2 = false"
        ></image>
        <image
          v-if="!pageData.hidePassword2"
          style="width: 40rpx; height: 22rpx"
          :src="iconEye"
          @click="pageData.hidePassword2 = true"
        ></image>
      </view>
      <image style="width: 600rpx; margin-left: 40rpx" mode="widthFix" :src="iconDivider"></image>
      <view class="input-entire">
        <view class="left">
          <view class="must">*</view>
          <image class="icon" :src="iconCode" mode="widthFix"></image>
          <input
            class="text"
            v-model="pageData.form.code"
            placeholder="请输入验证码"
            placeholder-class="placeholder-class"
          />
        </view>
        <view
          style="
            position: absolute;
            right: 0;
            font-size: small;
            padding: 15rpx;
            z-index: 99;
            background-color: rgb(18, 73, 124);
            border-radius: 10rpx;
          "
          @click="sendMsg"
        >
          <view v-if="!pageData.isSend">获取验证码</view>
          <view v-else>下次发送:{{ pageData.msgTime }}s</view>
        </view>
      </view>
      <image style="width: 600rpx; margin-left: 40rpx" mode="widthFix" :src="iconDivider"></image>
      <view class="btn-register" @click="confirmReset">确认修改</view>
      <view class="register-forget">
        <text @click="handleRegister">经销商注册</text>
        <text @click="back">登录</text>
      </view>
      <view style="height: 50rpx"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { loginBg } from '@/static/imgMap'
import {
  iconCode,
  iconDivider,
  iconEye,
  iconEyeClose,
  iconPassword,
  iconPhone,
  searchInfo,
} from '@/static/iconsMap'
// 导入需要的API
import { getMobileCode, resetPassword } from '@/service/user/userRegister'

const safeAreaInsets = uni.getSystemInfoSync().safeAreaInsets
const pageData = reactive({
  form: {
    phone: '',
    password: '',
    password2: '',
    code: '',
  },
  isSend: false,
  msgTime: 60,
  timer: null,
  hidePassword1: true,
  hidePassword2: true,
  popShow: false,
})

// 发送验证码
const sendMsg = () => {
  if (pageData.isSend) return

  // 验证手机号
  if (!pageData.form.phone || !/^1\d{10}$/.test(pageData.form.phone)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none',
    })
    return
  }

  // 调用获取验证码API
  getMobileCode(pageData.form.phone, 2) // 2表示忘记密码场景
    .then((res) => {
      if (res.code === 200) {
        uni.showToast({
          title: '验证码已发送',
          icon: 'success',
        })
        startCountDown()
      } else {
        uni.showToast({
          title: res.message || '获取验证码失败',
          icon: 'none',
        })
      }
    })
}

// 倒计时函数
const startCountDown = () => {
  pageData.isSend = true
  pageData.msgTime = 60
  pageData.timer = setInterval(() => {
    pageData.msgTime--
    if (pageData.msgTime <= 0) {
      clearInterval(pageData.timer)
      pageData.isSend = false
    }
  }, 1000)
}

// 确认修改密码
const confirmReset = () => {
  // 表单验证
  if (!pageData.form.phone || !/^1\d{10}$/.test(pageData.form.phone)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none',
    })
    return
  }

  if (!pageData.form.code) {
    uni.showToast({
      title: '请输入验证码',
      icon: 'none',
    })
    return
  }

  if (!pageData.form.password) {
    uni.showToast({
      title: '请输入新密码',
      icon: 'none',
    })
    return
  }

  // 密码强度验证
  if (!/^(?=.*[A-Za-z])(?=.*\d).{8,}$/.test(pageData.form.password)) {
    uni.showToast({
      title: '密码至少8位且包含数字、字母',
      icon: 'none',
    })
    return
  }

  if (pageData.form.password !== pageData.form.password2) {
    uni.showToast({
      title: '两次输入的密码不一致',
      icon: 'none',
    })
    return
  }

  // 调用重置密码API
  resetPassword({
    forgetMobile: pageData.form.phone,
    forgetCode: pageData.form.code,
    newPwd: pageData.form.password,
  }).then((res) => {
    if (res.code === 200) {
      uni.showToast({
        title: '密码重置成功',
        icon: 'success',
      })
      // 延迟跳转到登录页
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    } else {
      uni.showToast({
        title: res.message || '密码重置失败',
        icon: 'none',
      })
    }
  })
}

// 清理定时器
onUnmounted(() => {
  if (pageData.timer) {
    clearInterval(pageData.timer)
  }
})

// 返回
const back = () => {
  uni.navigateBack()
}

const handleRegister = () => {
  uni.navigateTo({
    url: '/pages/login/register',
  })
}
</script>
<style lang="scss">
.register-forget {
  display: flex;
  justify-content: center;
  gap: 200rpx;
  padding: 30rpx;
  margin-top: 40rpx;
  color: #fff;

  text {
    position: relative;
    padding-bottom: 5rpx;
    font-size: 24rpx;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 110%;
      height: 2rpx;
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.8),
        rgba(255, 255, 255, 0)
      );
    }
  }
}
.placeholder-class {
  color: white;
}
.entire {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    width: 100vw;
    height: 100vh;
  }
  .title1 {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 50rpx;
    font-size: 50rpx;
    font-weight: 550;
    color: #fff;
  }
  .title2 {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20rpx;
    color: #fff;
  }
  .input-area {
    width: 680rpx;
    min-height: 800rpx;
    margin-top: 80rpx;
    margin-left: 35rpx;
    padding-top: 40rpx;
    background-color: rgba(27, 91, 147, 0.64);
    border-radius: 20rpx;
    box-shadow: inset 0rpx 0rpx 30rpx rgba(255, 255, 255, 0.22);
    .input-entire {
      display: flex;
      width: 600rpx;
      height: 80rpx;
      margin-left: 40rpx;
      align-items: center;
      color: #fff;
      position: relative;
      justify-content: space-between;
      .left {
        display: flex;
        height: 80rpx;
        align-items: center;
        .must {
          width: 20rpx;
          height: 50rpx;
        }
        .icon {
          width: 40rpx;
        }
        .text {
          width: 450rpx;
          margin-left: 30rpx;
        }
        .text-2 {
          width: 350rpx;
          margin-left: 30rpx;
        }
      }
    }
    .btn-register {
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 600rpx;
      height: 80rpx;
      margin-top: 100rpx;
      margin-left: 40rpx;
      color: #fff;
      background-color: #134779;
      border-radius: 10rpx;
    }
  }
}
</style>
